<template>
	<view class="">
		<common-title :title="titleContent" @clickLeft="backToUpPage"></common-title>
		<view v-if="orderInfo" class="">
			<view class="order-step">
				<uni-steps v-if="cancelTime" :options="orderStepCancel" :active="orderInfo.status - 1" ></uni-steps>
				<uni-steps v-else :options="orderStepCompleted" :active="orderInfo.status - 1" ></uni-steps>
			</view>
			<view class="line-between"></view>
			<!-- 订单细节 -->
			<view class="order-details">
				<view class="order-number">
					<view>订单编号：</view>
					<view>{{orderInfo.orderNo}}</view>
				</view>
				<view class="line-between"></view>
				<view class="order-detail">
					<view class="order-detail-item" v-for="(item,index) in orderInfo.restaurantOrderDetailList" :key="index">
						<image :src="item.dishImage" mode="aspectFill" class="order-detail-item-image"/>
						<view class="order-detail-item-info">
							<view class="order-detail-item-name">{{item.dishName}}</view>
							<view class="order-detail-item-price">{{item.price * item.quantity}}<uni-icons type="heart-filled" color="#ff4500" size="26rpx" style="margin-left: 5rpx;"></uni-icons></view>
						</view>
						<view class="order-detail-count">
							<text>×{{ item.quantity }}</text> <!-- 显示数量 -->
						</view>
					</view>
				</view>
			</view>
			<view class="line-between"></view>
			<view class="order-amount">
				<view>总计：{{orderInfo.amount}}<uni-icons type="heart-filled" color="#ff4500" size="36rpx" style="margin-left: 5rpx;"></uni-icons></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	import { onLoad } from '@dcloudio/uni-app';
	import { apiRestaurantOrderInfo } from "../../../utils/apiRestaurant";
	//================================common-title=========================================
	//标题内容
	const titleContent = ref({
		left:'',
		midst:'餐厅订单'
	});
	
	//返回
	const backToUpPage = () => {
		const statusToUrlMap = {
			1: '/pages/message/restaurant_message/restaurant-ordered',
			2: '/pages/message/restaurant_message/restaurant-received',
			3: '/pages/message/restaurant_message/restaurant-completed',
			4: '/pages/message/restaurant_message/restaurant-completed'
		};
	
		const url = statusToUrlMap[orderInfo.value.status];
	
		if (url) {
			uni.redirectTo({
				url: url
			});
		}
	};
	//-------------------------------获取订单编号------------------------------------------------------
	const orderInfo = ref(null);
	const orderedTime = ref('');
	const receivedTime = ref('');
	const completedTime = ref('');
	const cancelTime = ref('');
	const extractTime = (timeString) => timeString ? timeString.split(' ')[1] || '' : '';
	onLoad((options) => {
		let orderNo = options.orderNo ? decodeURIComponent(options.orderNo) : '';
		// console.log(orderNo.value);
		apiRestaurantOrderInfo(orderNo).then((res) => {
			// console.log(res);
			orderInfo.value = res;
			orderedTime.value = extractTime(res.orderTime);
			receivedTime.value = extractTime(res.receivedTime);
			completedTime.value = extractTime(res.checkoutTime);
			cancelTime.value = extractTime(res.cancelTime);
			// console.log(timePart.value);
		})
	});
	//-------------------------------订单状态条------------------------------------------------------
	
	const orderStepCancel = ref([
		{title:'下单', desc:orderedTime},
		{title:'接单', desc:receivedTime},
		{title:'已取消', desc:cancelTime},
	]);
	const orderStepCompleted = ref([
		{title:'下单', desc:orderedTime},
		{title:'接单', desc:receivedTime},
		{title:'完成', desc:completedTime},
	]);
</script>

<style lang="scss" scoped>
	.order-step{
		// background-color: aqua;
		padding: 20px 0;
	}
	.line-between{
		border-bottom: 1px solid #e5e5e5;
		margin: 0 20px;
	}
	.order-details{
		.order-number{
			color: #a7a7a7;
			font-size: 16px;
			display: flex;
			flex-direction: column;
			padding: 10px;
		}
		.order-detail{
			background-color: #f0f0f0; /* 设置灰色背景 */
			border: 1px solid #ccc; /* 边框颜色和宽度 */
			border-radius: 5px; /* 圆角边框 */
			margin: 10px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
			.order-detail-item{
			    display: flex;
			    justify-content: space-between; /* 分散内容 */
			    align-items: center; /* 垂直居中 */
				padding: 10px;
				.order-detail-item-image {
				    width: 100rpx;
				    height: 75rpx;
				    border-radius: 10rpx;
				    margin-left: 30rpx;
				}
				.order-detail-item-info {
				    display: flex;
				    flex-direction: column;
				    justify-content: center; /* 垂直居中对齐 */
				    align-items: flex-start; /* 水平左对齐 */
				    margin-left: 30rpx; /* 可以根据需要调整这个值 */
				    font-size: 26rpx;
				    padding: 10rpx;
				    flex: 1; /* 让它占据剩余空间 */
				}
				.order-detail-count {
				    display: flex;
				    align-items: center;
				    margin-right: 30rpx;
				}
			}
		}
		
	}
	.order-amount{
		position: absolute;
		padding: 20px;
		right: 20px;
	}
</style>
